<!-- 呼吸机 -->
<template>
	<view class="respirator ">
		<headerview></headerview>
		<view class="huxiji-left">
			<view class="huxiji-middle">
				<view class="huxiji-content">
					<view class="top">
						<view class="middle-top">
							<text>Ppeak</text>
							<text>mbar</text>
						</view>
						<view class="middle-bottom">500</view>
					</view>
					<view class="top">
						<view class="middle-top">
							<text>Pmean</text>
							<text>mbar</text>
						</view>
						<view class="middle-bottom">11</view>
					</view>
					<view class="top">
						<view class="middle-top">
							<text>PEEP</text>
							<text>mbar</text>
						</view>
						<view class="middle-bottom">11</view>
					</view>
				</view>
				<view class="huxiji-content">
					<view class="top">
						<view class="middle-top">
							<text>Vti</text>
							<text>ml</text>
						</view>
						<view class="middle-bottom">500</view>
					</view>
					<view class="top">
						<view class="middle-top">
							<text>Mvi</text>
							<text>L/min</text>
						</view>
						<view class="middle-bottom">6.0</view>
					</view>
				</view>
				<view class="huxiji-content">
					<view class="top">
						<view class="middle-top">
							<text>EtCO2</text>
							<text>mmHg</text>
						</view>
						<view class="middle-bottom">4.0</view>
					</view>
				</view>
				<view class="huxiji-content">
					<view class="top">
						<view class="middle-top">
							<text>F(fspn)</text>
							<text>1/min</text>
						</view>
						<view class="middle-bottom">12</view>
					</view>
				</view>
			</view>
			<view class="huxiji-right">
				 <canvas class="monitor-left-item-charts" canvas-id="mdc_ecg_elec_potl_i" id="mdc_ecg_elec_potl_i"></canvas>
			</view>
			<view class="huxiji-right-btns">
				<view>
					<button>1:3:2</button>
					<view>吸呼比</view>
				</view>
				<view>
					<button>36
					<b>1/min</b>
					</button>
					<view>呼吸频率
					</view>
				</view>
				<view>
					<button>23
					<b>mbar</b>
					</button>
					<view>呼气末正压
					</view>
				</view>
				<view>
					<button>100
					<b>%</b>
					</button>
					<view>氧浓度</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import uCharts from '@/components/u-charts.js';
import ChartTimer from '@/components/chart-timer.js';
import headerview from '@/components/headerView.vue';
export default {
	components: {
		headerview
	},
	data() {
		return {
			// 图表相关
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			Interactive: '', //交互显示的数据
			sWidth: {
				width: '100%'
			},
			webviewStyles: {
				progress: {
					color: '#FF3333'
				}
			}
		};
	},
	methods: {
		// 返回
		onPath() {
			uni.redirectTo({
				url: './patientRecord'
			});
		}
	},
	onLoad() {
		// plus.screen.lockOrientation('portrait-primary'); // 锁定方向 纵向
	},
	onReady() {
		var _self = this;
		uni.getSystemInfo({
			success: function(res) {
				if (res.pixelRatio > 1) {
					//正常这里给2就行，如果pixelRatio=3性能会降低一点
					//_self.pixelRatio =res.pixelRatio;
					_self.pixelRatio = 2;
				}
			}
		});
		var chartFun = function(e) {
			e.setWH(100, 100, 900, 200, '#333');
		};

		var charts = {
			mdc_ecg_elec_potl_i: chartFun
		};

		this.chartTimer = new ChartTimer(charts, this)
			.setInterval(80)
			.testData()
			.run();

		console.log(this.chartTimer);
	},
	onShow() {},
	onBackPress(options) {
		// console.log('来了来了');
		uni.redirectTo({
			url: 'pages/consultationList'
		});
	}
};
</script>
<style lang="less" scoped>
// .respirator {
// 	width: 100vw;
// 	height: 100vh;
// }
// header {
// 	width: 100%;
// 	height: 80px;
// 	background: rgba(49, 131, 224, 1);
// }
// .respirator-box {
// 	width: 100%;
// 	display: flex;
// 	justify-content: center;
// }
// .respirator-box-con {
// 	border: 1px solid rgba(221, 221, 221, 1);
// 	width: 1200px;
// 	height: 662px;
// 	margin-top: 10vh;
// }
// .respirator-header {
// 	height: 73px;
// 	line-height: 73px;
// 	border-bottom: 1px solid rgba(221, 221, 221, 1);
// 	text-align: center;
// 	box-sizing: border-box;
// }
// .respirator-center {
// 	flex: 1;
// 	display: flex;
// }
// .respirator-center-left {
// 	width: 28.4%;
// 	height: 504px;
// 	box-sizing: border-box;
// 	border-right: 1px solid rgba(221, 221, 221, 1);
// 	display: flex;
// }

// .respirator-center-item-left {
// 	width: 30%;
// 	flex-direction: column;
// 	display: flex;
// 	border-right: 1px solid rgba(221, 221, 221, 1);
// }

// .item-left-const {
// 	border-bottom: 1px solid rgba(221, 221, 221, 1);
// 	display: flex;
// 	flex: 1;
// 	align-items: center; /*垂直居中*/
// 	justify-content: center; /*水平居中*/
// }
// .item-left-const:nth-child(3) {
// 	border: 0;
// }
// .item-left-img {
// 	width: 50px;
// 	height: 50px;
// 	// vertical-align: middle;
// }

// .respirator-center-item-right {
// 	flex: 1;
// 	flex-direction: column;
// 	display: flex;
// 	align-items: center; /*垂直居中*/
// 	justify-content: center; /*水平居中*/
// }

// .item-right-const {
// 	padding: 5px;
// 	box-sizing: border-box;
// 	width: 100%;
// 	flex: 1;
// 	border-bottom: 1px solid rgba(221, 221, 221, 1);
// }
// .item-right-const-deteil {
// 	display: flex;
// 	justify-content: space-between;
// }
// .item-right-const-deteil > text {
// 	height: 18px;
// 	font-size: 18px;
// 	font-weight: 500;
// 	color: rgba(51, 51, 51, 1);
// }
// .item-right-const-deteil + view {
// 	width: 100%;
// 	text-align: center;
// 	margin: 30px 0 0 0;
// 	font-size: 40px;
// 	line-height: 40px;
// 	color: #333;
// 	font-weight: 700 !important;
// }
// .respirator-center-right {
// 	flex: 1;
// 	display: flex;
// 	flex-direction: column;
// }
// #chart {
// 	width: 100%;
// 	height: 80%;
// 	background-color: #ffffff;
// }
// .respirator-center-right-bottom {
// 	display: flex;
// 	height: 20%;
// 	justify-content: center; /*水平居中*/
// 	border-top: 1px solid rgba(221, 221, 221, 1);
// }
// .respirator-center-right-bottom view {
// 	display: flex;
// 	border-right: 1px solid rgba(221, 221, 221, 1);
// 	flex: 1;
// 	flex-direction: row;
// 	justify-content: space-around;
// 	align-items: center; /*垂直居中*/
// }

// .respirator-center-right-bottom-test1 {
// 	height: 18px;
// 	font-size: 18px;
// 	font-weight: 500;
// 	color: rgba(51, 51, 51, 1);
// 	line-height: 18px;
// }
// .respirator-center-right-bottom-test2 {
// 	height: 18px;
// 	font-size: 18px;
// 	font-weight: bold;
// 	color: rgba(51, 51, 51, 1);
// 	line-height: 18px;
// 	font-weight: 700;
// }
// .respirator-footer {
// 	display: flex;
// 	height: 13%;
// 	border-top: 1px solid rgba(221, 221, 221, 1);
// }
// .respirator-footer view {
// 	border-right: 1px solid rgba(221, 221, 221, 1);
// 	flex: 1;
// 	display: flex;
// 	justify-content: space-around;
// 	flex-direction: row;
// 	align-items: center; /*垂直居中*/
// }

// .respirator-footer view text:nth-child(1) {
// 	height: 18px;
// 	font-size: 18px;
// 	font-weight: 500;
// 	color: rgba(51, 51, 51, 1);
// 	line-height: 18px;
// }
// .respirator-footer view text:nth-child(2) {
// 	height: 18px;
// 	font-size: 18px;
// 	font-weight: 700;
// 	color: rgba(51, 51, 51, 1);
// 	line-height: 18px;
// }
// .bm0 {
// 	border-bottom: 0 !important;
// }
// .br0 {
// 	border-right: 0 !important;
// }
.monitor-left-item-charts {
	// width: 800px;
	// height: 300px;
	// box-sizing: border-box;
	// margin: 100px 0 0 20px;
	flex: 1;
	display: flex;
	margin-top: 160px;

}

// .con-header {
// 	display: flex;
// 	justify-content: space-between;
// 	padding: 0 23.75px 0 150px;
// 	height: 63px;
// 	line-height: 63px;
// 	width: 100%;
// 	background: rgba(49, 131, 224, 1);
// 	color: #ffffff;
// 	font-size: 14px;
// 	box-sizing: border-box;
// }
// .logout {
// 	display: inline-block;
// 	width: 99.75px;
// 	height: 30.08px;
// 	background: rgba(28, 112, 207, 1);
// 	border-radius: 15.83px;
// 	vertical-align: middle;
// 	line-height: 30.08px;
// 	text-align: center;
// 	font-size: 11.08px;
// 	font-weight: 600;
// 	margin-left: 47.5px;
// 	&::before {
// 		content: '';
// 		position: absolute;
// 		background: url('../static/image/caozuo_zhuxiao_tuichudenglu@2x.png');
// 		width: 12.66px;
// 		height: 13.45px;
// 		background-size: 100% 100%;
// 		margin: 8px 0 0 -16px;
// 	}
// }
// .onPath {
// 	width: 230px;
// 	height: 63px;
// 	line-height: 63px;
// 	background: url('../static/image/Fill_1.png') no-repeat;
// 	background-position-x: 1px;
// 	background-position-y: 20px;
// 	position: absolute;
// 	top: 0px;
// 	left: 40px;
// 	color: #ffffff;
// 	padding: 0;
// 	border: 0;
// 	float: left;
// }
// uni-button:after {
// 	content: none;
// }
// uni-button {
// 	font-size: 14px;
// }
// iframe {
// 	// flex: 1;
// 	width: 100%;
// 	height: 100%;

// }
// #canvas {
// 	width: 100%;
// 	height: 100%;
// }
.huxiji-left {
	display: flex;
	width: 1200px;
	height: 531px;
	display: flex;
	border-top: 1px solid rgba(240, 240, 240, 1);
	border-right: 1px solid rgba(240, 240, 240, 1);
	border-bottom: 1px solid rgba(240, 240, 240, 1);
	margin:10vh auto 0 auto;
	.huxiji-image {
		width: 50px;
		display: flex;
		flex-direction: column;
		// height: 109.64px;
		justify-content: space-around;
		// align-items: center;
		view {
			height: 100%;
			width: 100%;
			border-left: 1px solid rgba(240, 240, 240, 1);
			border-bottom: 1px solid rgba(240, 240, 240, 1);
			text-align: center;
			line-height: 55.16px;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}
		.img1 {
			width: 13.15px;
			height: 18.42px;
		}
		.img2 {
			width: 11.4px;
			height: 18.42px;
		}
		.img3 {
			width: 9.64px;
			height: 18.42px;
		}
	}
	.huxiji-middle {
		width: 237px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.huxiji-content {
			flex: 1;
			border: 1px solid rgba(240, 240, 240, 1);
			.top {
				min-width: 108px;
				padding: 3% 5%;
				box-sizing: border-box;
				border-top: 0;
				display: flex;
				justify-content: space-between;
			}
			.middle-top {
			
				text-align: left;
				text {
					display: block;
					height: 12px;
					line-height: 12px;
					font-size: 20px;
				}
				text:nth-child(1) {
					color: #333;
					font-size: 22px;
					height: 22px;
					line-height: 22px;
				}
				text:nth-child(2) {
					color: #888;
					font-size: 18px;
					height: 18px;
					line-height: 18px;
					margin-top: 5px;
				}
				span {
					margin-left: 20px;
				}
			}
			.middle-bottom {
				margin-top: 5.26px;
				font-size: 14px;
				font-family: Arial-BoldMT, Arial;
				font-weight: normal;
				text-align: center;
			}
		}
	}
}
.huxiji-right {
	width: 93%;
	position: relative;
	display: flex;
	padding:0 20px;
	box-sizing: border-box;
	.xindiantu-chart {
		// width: 200px;
		height: 220px;
		border-left: 0;
		position: relative;
		border-bottom: 0;
	}
	.right-bottom {
		// flex: 1;
		height: 110px !important;
		display: flex;
		justify-content: space-between;
		// border-bottom: 1px solid #f0f0f0;
		height: 100%;
		box-sizing: border-box;
		.item {
			// flex: 1;
			// height: 100%;
			display: flex;
			justify-content: space-between;
			padding: 4.75px 7.91px;
			border-top: 1px solid #f0f0f0;
			border-right: 1px solid #f0f0f0;
		}
	}
}
.huxiji-right-btns {
	// width: 17%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-top: 12px;
	box-sizing: border-box;
	width: 232px;
	border-left: 1px solid #f0f0f0;
	> view {
		// display: flex;
		width: 232px;
		button {
			width:187px;
			height:60px;
			border-radius:10px;
			line-height: 60px;
			background-color: #1e9eb8;
			color: #ffffff;
			margin: auto;
			text-align: center;
			padding: 0;
			font-weight: 600;
			position: relative;
			b {
				position: absolute;
				left: 12px;
				bottom: 9px;
				font-weight: 500;
				height:18px;
				font-size:18px;
				font-family:SourceHanSansCN-Medium,SourceHanSansCN;
				font-weight:500;
				color:rgba(255,255,255,1);
				line-height:18px;
			}
		}
		view {
			width: 200%;
			height: 22px;
			font-size: 22px;
			font-weight: 500;
			line-height: 22px;
			text-align: center;
			margin-left: -49%;
			margin-top: 14px;
		}
	}
}
.huxiji-bottom {
	display: flex;
	.bottom-item {
		display: flex;
		justify-content: space-between;
		width: 25%;
		padding: 7.91px;
		border: 1px solid rgba(240, 240, 240, 1);
	}
}
</style>
